<template>
  <NuxtLayout name="navigation">
    <RightToLeft>
      <Backtop/>
      <Search/>
      <template #left>
        <client-only>
          <Anchor v-if="classifyData.length > 0" name="Navbar"/>
          <Card v-if="loginStatus" id="Navbar0" title="我的收藏" margin="10px 0 0">
            <Site :size="setting.homeSiteCount" is-collect/>
          </Card>
          <Card :id="'Navbar' + (index + 1)"
                v-for="(item, index) in classifyData"
                :key="index"
                v-if="classifyData.length > 0"
                :title="item.classifyName"
                margin="10px 0 0"
          >
            <template #icon>
              <nuxt-link :to="'/classify/' + item.id">
                <div style="display: flex">
                  <el-icon>
                    <Menu/>
                  </el-icon>
                  更多
                </div>
              </nuxt-link>
            </template>
            <Site :classify="item.id" :size="setting.homeSiteCount"/>
          </Card>
          <Empty v-if="classifyData.length < 1" description="快去提交网站吧~">
            <nuxt-link to="/push">
              <el-button type="primary">提交网站</el-button>
            </nuxt-link>
          </Empty>
        </client-only>
      </template>
      <template #right>
        <Card title="统计" margin="10px 0 0">
          <div class="statistic">
            <div>
              <el-statistic value-style="color: #f56c6c" title="已收录站点" :value="statistics.site"/>
            </div>
            <div>
              <el-statistic value-style="color: #f56c6c" title="标签数量" :value="statistics.tag"/>
            </div>
            <div>
              <el-statistic value-style="color: #f56c6c" title="用户评论" :value="statistics.comment"/>
            </div>
          </div>
        </Card>
        <Card title="猜你喜欢" margin="10px 0 0">
          <SiteTitle random/>
        </Card>
        <Card title="热门标签" margin="10px 0 0">
          <Tag/>
        </Card>
      </template>
    </RightToLeft>
  </NuxtLayout>
</template>

<script setup lang='ts'>
import {Menu} from "@element-plus/icons-vue";

const {siteApi, tagApi, commentsApi} = useApi();
const {loginStatus} = useStoreToRefs(useStores.user());
const {setting} = useStoreToRefs(useStores.setting());
const {classifyData} = useStoreToRefs(useStores.classify());
const statistics = reactive({
  site: 0,
  tag: 0,
  comment: 0
});

useHead({
  title: '首页' + setting.value?.seoSeparate + setting.value?.name,
  meta: [
    {name: 'description', content: setting.value?.seoDescription},
    {name: 'keywords', content: setting.value?.seoKeywords.join(",")}
  ]
});

onBeforeMount(() => {
  getSiteCount();
  getTagCount();
  getCommentCount();
});

const getSiteCount = () => {
  siteApi.getCount().then((res: any) => {
    statistics.site = res.data;
  })
};
const getTagCount = () => {
  tagApi.getCount().then((res: any) => {
    statistics.tag = res.data;
  })
};
const getCommentCount = () => {
  commentsApi.getCount().then((res: any) => {
    statistics.comment = res.data;
  })
};
</script>

<style scoped lang="scss">
.statistic {
  display: flex;
  flex-direction: column;

  & > div:first-child {
    margin-top: 0;
  }

  & > div {
    margin-top: 10px;
  }
}
</style>